<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* input[value] {
        color: brown;
    } */
    input[type=text] {
        color: brown;  
    }
    div[class^="icon"] {
        color: chartreuse;
    }
    section[class$="data"]{
        color: cyan;
    }
</style>
<body>
    <!-- 1.利用属性选择器就可以不用借助类选择器或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="submit"> -->
    <!-- 2. 属性选择器可以选择属性=值的某些元素 重点务必掌握-->
    <input type="text" value="6月会有求职好消息的">
    <input type="password">
     <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
     <div class="icon1">小图标1</div>
     <div class="icon2">小图标2</div>
     <div class="icon3">小图标3</div>
     <div class="icon4">小图标4</div>
     <div>我是打酱油的</div>
     <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
     <section class="icon1-data">我是安其拉</section>
     <section class="icon2-data">我是哥斯拉</section>
     <section class="icon3-ico">哪我是谁</section>
</body>
</html>